<script lang="ts" setup>
import type {
  SysLogOperationPageQo,
  SysLogOperationVo,
} from '@/typings/system/log/operation'

import {
  deleteLogOperationApi,
  getLogOperationPageListApi,
} from '@/api/system/log/operation'
import { View } from '@element-plus/icons-vue'
import Details from './details.vue'

defineOptions({
  name: 'SystemLogOperation',
})

const columns: TableColumnType[] = [
  {
    type: 'selection',
    fixed: 'left',
    prop: 'selection',
  },
  {
    label: '标题',
    prop: 'title',
    align: 'center',
  },
  {
    label: '应用名',
    prop: 'applicationName',
    align: 'center',
  },
  {
    label: '请求方法',
    prop: 'requestMethod',
    align: 'center',
    width: 100,
  },
  {
    label: '业务类型',
    align: 'center',
    prop: 'businessType',
    type: 'dict',
    dictType: 'operation_business_type',
    width: 130,
  },
  {
    label: '操作人员',
    prop: 'operName',
    align: 'center',
    width: 200,
  },
  {
    label: '用户类型',
    align: 'center',
    prop: 'userType',
    type: 'dict',
    dictType: 'user_type',
    width: 130,
  },
  {
    label: '浏览器',
    align: 'center',
    prop: 'browserType',
    width: 130,
  },
  {
    label: '操作系统',
    align: 'center',
    prop: 'operatingSystem',
    width: 130,
  },
  {
    label: '操作时间',
    align: 'center',
    prop: 'operTime',
    width: 200,
  },
  {
    label: '请求耗时',
    align: 'center',
    prop: 'costTime',
    type: 'slot',
    width: 100,
  },
  {
    label: '操作',
    prop: 'operation',
    align: 'center',
    type: 'slot',
    width: 200,
  },
]
const detailsRef = $ref<InstanceType<typeof Details>>()
let selectionList = $ref<string[]>([])

const timeRange = $computed ({
  get() {
    return [search.operTimeStart, search.operTimeEnd]
  },
  set(val?: (string | undefined)[] | null) {
    if (!val || !val.length) {
      search.orderDateStart = undefined
      search.orderDateEnd = undefined
      return
    }
    const [startTime, endTime] = val
    search.operTimeStart = dayjs(startTime).format('YYYY-MM-DD')
    search.operTimeEnd = dayjs(endTime).format('YYYY-MM-DD')
  },
})
// 搜索
const [search, resetClk] = useResetState<SysLogOperationPageQo>(
  { pageNum: 1, pageSize: 10, total: 0 },
  () => {
    loadedTable()
  },
)
// 分页
const { loadedTable, tableData, loading, paginationChange } = useTablePaging(
  getLogOperationPageListApi,
  search,
)
// 打开对话框
async function openDialog(data: SysLogOperationVo) {
  if (!detailsRef)
    return
  const { type } = await detailsRef?.showDialog({
    data,
  })
  if (!type)
    return
  loadedTable()
}

// 删除
const [deleteBatch] = useDeleteBatch($$(selectionList), deleteLogOperationApi, () => {
  loadedTable()
  selectionList = []
})

onMounted(() => {
  loadedTable()
})
</script>

<template>
  <div
    un-flex="~ col"
    un-h="full"
  >
    <el-card
      un-m-b="2.5"
      body-style="height: 100%;"
      style="overflow: visible;"
    >
      <sy-table-query @search="loadedTable" @reset="resetClk">
        <template #default="{ expand }">
          <el-form
            :inline="true"
            :model="search"
            label-width="auto"
            un-grid="~ cols-4 gap-x-8 "
          >
            <el-form-item label="标题">
              <el-input
                v-model="search.title"
                placeholder="请输入标题"
                clearable
              />
            </el-form-item>
            <el-form-item label="应用名">
              <el-input
                v-model="search.applicationName"
                placeholder="请输入应用名"
                clearable
              />
            </el-form-item>
            <el-form-item label="请求Url">
              <el-input
                v-model="search.requestUrl"
                placeholder="请输入请求Url"
                clearable
              />
            </el-form-item>
            <el-form-item label="IP">
              <el-input
                v-model="search.requestIp"
                placeholder="请输入IP"
                clearable
              />
            </el-form-item>
            <template v-if="expand">
              <el-form-item label="IP地址">
                <el-input
                  v-model="search.ipAddress"
                  placeholder="请输入IP"
                  clearable
                />
              </el-form-item>
              <el-form-item label="操作系统">
                <el-input
                  v-model="search.operatingSystem"
                  placeholder="请输入操作系统"
                  clearable
                />
              </el-form-item>
              <el-form-item label="浏览器">
                <el-input
                  v-model="search.browserType"
                  placeholder="请输入浏览器"
                  clearable
                />
              </el-form-item>
              <el-form-item label="请求方法" prop="requestMethod">
                <sy-dict
                  v-model="search.requestMethod"
                  dict-type="request_method"
                  placeholder="请选择请求方法"
                  type="select"
                  clearable
                />
              </el-form-item>
              <el-form-item label="用户类型" prop="userType">
                <sy-dict
                  v-model="search.userType"
                  dict-type="user_type"
                  placeholder="请选择业务类型"
                  type="select"
                  clearable
                />
              </el-form-item>
              <el-form-item label="业务类型" prop="businessType">
                <sy-dict
                  v-model="search.businessType"
                  dict-type="operation_business_type"
                  placeholder="请选择业务类型"
                  type="select"
                  clearable
                />
              </el-form-item>
              <el-form-item label="操作时间">
                <el-date-picker
                  v-model="(timeRange as any)"
                  type="daterange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
            </template>
          </el-form>
        </template>
      </sy-table-query>
    </el-card>
    <el-card
      un-h-full
      body-style="height: 100%;"
    >
      <sy-table
        v-model:selection="selectionList"
        row-key="id"
        height="100%"
        selection-chenge-use="id"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :paging="search"
        hide-add
        border
        delete-btn-perms="operation:delete"
        @paging-change="paginationChange" @refresh="loadedTable"
        @click-del="deleteBatch"
      >
        <template #costTime="{ row }">
          {{ row.costTime }}ms
        </template>
        <template #operation="{ row }">
          <el-button
            link
            type="primary"
            @click="openDialog(row)"
          >
            <template #icon>
              <el-icon><View /></el-icon>
            </template>
            详情
          </el-button>
        </template>
      </sy-table>
    </el-card>
    <Details ref="detailsRef" />
  </div>
</template>

<style scoped>
:deep .sy-drawer__body {
  padding-top: 0 !important;
}
</style>
